import React, { memo } from 'react';
import { Tabs } from 'antd';

const { TabPane } = Tabs;

import Recommendation from './child-pages/Recommendation'
import Customized from './child-pages/Customized'
import RankingList from './child-pages/RankingList'
import SongSheet from './child-pages/SongSheet'

function Discover() {
  return (
    <div className="discover">
      <Tabs defaultActiveKey="1">
        <TabPane tab="个性推荐" key="1">
          <Recommendation />
        </TabPane>
        <TabPane tab="专属定制" key="2">
          <Customized />
        </TabPane>
        <TabPane tab="歌单" key="3">
          <RankingList />
        </TabPane>
        <TabPane tab="排行榜" key="4">
          <SongSheet />
        </TabPane>
        <TabPane tab="歌手" key="5">
          Content of Tab Pane 5
        </TabPane>
        <TabPane tab="最新音乐" key="6">
          Content of Tab Pane 6
        </TabPane>
      </Tabs>
    </div>
  )
}

export default memo(Discover);
